<template>
	<NavBar :obj="{ title: '订单详情', color: '', backgroundColor: 'transparent' }" :scrollTop="scrollTop" />

	<image :src="theme?.bg?.my_order_info" mode="widthFix" class="img-top"></image>

	<view class="fill">
		<view class="status flex flex-col items-center justify-between">
			<view class="top flex items-center justify-center">
				<up-icon name="clock" color="#fff" size="23" v-if="info.status != 5"></up-icon>
				<text>{{ info.friendlyText }}</text>
			</view>
			<view class="status-bottom flex items-center justify-center" v-if="info.status == 1 || info.status == 3">
				<view class="abs">{{ info.status == 1 ? '待支付剩余时间' : '自动收货剩余时间' }}</view>
				<view>
					<up-count-down :time="info.surplus_time" :format="info.status == 1 ? 'HH:mm:ss' : 'DD:HH:mm:ss'" autoStart millisecond @change="onChange">
						<view class="time">
							<view class="time__custom" v-if="info.status == 3">
								<text class="time__custom__item">{{ timeData.days }}</text>
							</view>
							<text class="time__doc" v-if="info.status == 3">天</text>
							<view class="time__custom">
								<text class="time__custom__item">{{ timeData.hours > 10 ? timeData.hours : '0' + timeData.hours }}</text>
							</view>
							<text class="time__doc">{{ info.status == 1 ? ':' : '时' }}</text>
							<view class="time__custom">
								<text class="time__custom__item">{{ timeData.minutes > 10 ? timeData.minutes : '0' + timeData.minutes }}</text>
							</view>
							<text class="time__doc">{{ info.status == 1 ? ':' : '分' }}</text>
							<view class="time__custom">
								<text class="time__custom__item">{{ timeData.seconds > 10 ? timeData.seconds : '0' + timeData.seconds }}</text>
							</view>
							<text class="time__doc" v-if="info.status == 3">秒</text>
						</view>
					</up-count-down>
				</view>
			</view>
		</view>
		<view class="infos">
			<view class="address flex items-center justify-between">
				<view class="flex-1">
					<view class="province flex items-center">
						<image src="/static/address/ic_dizglitub@2x.png" class="icon"></image>
						<view class="val">{{ info.address }}</view>
					</view>
					<view class="details line-2-clamp">{{ info.address_details }}</view>
					<view class="nickname flex items-center">
						<view class="val">{{ info.receiver }}</view>
						<view class="mobile">{{ info.receiver_tel }}</view>
					</view>
				</view>
				<!-- <view class="right-icon" @click="goUrl('/pages/address/index?order_id=' + info.id)" v-if="info.status < 3">修改</view> -->
			</view>

			<view class="product">
				<!-- <view class="business flex items-center">
					<image :src="imgUrl + info.business?.cover"></image>
					<view>{{ info.business?.title }}</view>
				</view> -->

				<view class="item flex" v-for="(item, index) in info.productsField" :key="index">
					<image :src="imgUrl + item.icon" class="icon"></image>
					<view class="info flex flex-col justify-between flex-1">
						<view class="top">
							<view class="title line-1-clamp">{{ item.title }}</view>
							<view class="spec">{{ item.spec }}</view>
						</view>
					</view>
					<view class="total flex flex-col items-center justify-center">
						<view :class="{ 'rmb-black': info.pay_way_raw != 'hds' }" class="val">{{ info.pay_way_raw != 'hds' ? item.vip_price : item.hds_price }}</view>
						<view class="num">共{{ item.num }}件</view>
					</view>
				</view>
			</view>
			<view class="layout">
				<view class="item flex items-center justify-between">
					<view class="title">
						商品金额
						<text>(共{{ info.num }}件)</text>
					</view>
					<view class="val">{{ info.pay_way_raw != 'hds' ? '￥' : '' }}{{ info.pay_way_raw != 'hds' ? info.total_amount : info.hds_product_amount }}</view>
				</view>

			<!-- 	<view class="item flex items-center justify-between">
					<view class="title">运费</view>
					<view class="val">{{ info.pay_way_raw != 'hds' ? '￥' : '' }}{{ info.pay_way_raw != 'hds' ? info.freight : info.hds_freight }}</view>
				</view> -->

				<view class="item total-item flex items-center justify-between">
					<view class="title"></view>
					<view class="val total flex items-end justify-center">
						<view class="text">合计：</view>
						<view :class="{ rmb: info.pay_way_raw != 'hds' }" class="text-val">{{ info.pay_way_raw != 'hds' ? info.real_amount : info.hds_amount }}</view>
					</view>
				</view>
			</view>

			<view class="layout">
				<view class="item flex items-center justify-between">
					<view class="title">订单备注</view>
					<view class="val" :class="{ gray: !info.remark }">{{ info.remark ? info.remark : '无' }}</view>
				</view>
			</view>

			<view class="layout">
				<view class="item flex items-center justify-between">
					<view class="title">订单编号</view>
					<view class="val gray">
						<text>{{ info.sn }}</text>
						<text class="copy" @click="copy(info.sn)">复制</text>
					</view>
				</view>
				<view class="item flex items-center justify-between">
					<view class="title">下单时间</view>
					<view class="val gray">{{ info.create_time }}</view>
				</view>
				<view class="item flex items-center justify-between" v-if="info.pay_way != '-'">
					<view class="title">支付方式</view>
					<view class="val gray">{{ info.pay_way }}</view>
				</view>
				
				<view class="item flex items-center justify-between" v-if="info.pay_time">
					<view class="title">付款时间</view>
					<view class="val gray">{{ info.pay_time}}</view>
				</view>
				<view class="item flex items-center justify-between" v-if="info.post_time">
					<view class="title">发货时间</view>
					<view class="val gray">{{ info.post_time}}</view>
				</view>
				<view class="item flex items-center justify-between" v-if="info.express_code">
					<view class="title">物流公司</view>
					<view class="val gray">{{ info.expressInfo?.title }}</view>
				</view>
				<view class="item flex items-center justify-between" v-if="info.express_code">
					<view class="title">物流单号</view>
					<view class="val gray">
						<text>{{ info.express_code }}</text>
						<text class="copy" @click="copy(info.express_code)">复制</text>
					</view>
				</view>
				<view class="item flex items-center justify-between" v-if="info.receipt_time">
					<view class="title">完成时间</view>
					<view class="val gray">{{ info.receipt_time}}</view>
				</view>
			</view>
		</view>
	</view>
	<view class="bottom flex items-center justify-end" v-if="info.status == 1 || info.status == 3 || info.status == 4">
		<view class="btn border-btn gray-btn" v-if="info.status == 1" @click="editOrder(info.id, 'cancel')">取消订单</view>

		<view class="btn fill-btn" v-if="info.status == 1" @click="goUrl('/pages/order/payment?id=' + info.id)">立即付款</view>
		<view class="btn fill-btn" v-if="info.status == 3" @click="editOrder(info.id, 'receipt')">确认收货</view>
		<view class="btn border-btn error-btn" v-if="info.status == 4" @click="goUrl('/pages/evaluate/add?order_id=' + info.id + '&mode=1')">去评价</view>
	</view>
</template>

<script setup>
	import { ref, nextTick } from 'vue';
	import { onLoad, onShow, onPageScroll } from '@dcloudio/uni-app';

	import { port, imgUrl, hint, goUrl, loading, closeLoading } from '/service/port';
	import { goBack } from '../../service/port';
	
	import { useThemeStore } from '@/stores/theme';
	
	const theme = useThemeStore();
	
	
	const timeData = ref({});
	const onChange = (e) => {
		timeData.value = e;
	};

	const id = ref('');
	const info = ref({});
	const scrollTop = ref(0);
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});

	onLoad((e) => {
		if (e.id) {
			id.value = e.id;
		}
	});

	onShow(() => {
		getMyOrderInfo();
	});

	function copy(val) {
		uni.setClipboardData({
			data: val,
			success: function () {
				hint('已复制');
			}
		});
	}

	function editOrder(id, type) {
		uni.showModal({
			title: '请确认',
			content: type == 'cancel' ? '确定要取消订单吗？' : '是否确认收货？',
			confirmColor: theme.themeColor,
			success: async function (res) {
				if (res.confirm) {
					loading();
					let res = await port('editOrder', { id: id, type: type });
					await nextTick();
					hint(res.msg);
					closeLoading();
					if (type == 'cancel') {
						goBack();
					} else {
						getMyOrderInfo();
					}
				}
			}
		});
	}

	async function getMyOrderInfo() {
		let res = await port('getMyOrderInfo', { id: id.value });
		info.value = res.data;
	}
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f0f0f0;
	}
	.img-top {
		width: 100%;
		height: 350rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}

	.bottom {
		gap: 16rpx;
		margin-top: 28rpx;
		position: fixed;
		bottom: 0;
		width: calc(100% - 60rpx);
		background: #ffffff;
		box-shadow: 0rpx -1rpx 0rpx 0rpx #eeeeee;
		padding: 18rpx 30rpx;
		.btn {
			width: 160upx;
			padding: 12rpx 0;
			text-align: center;
			border-radius: 16upx;
		}
		.border-btn {
			font-weight: 400;
			font-size: 26upx;
			padding: 10rpx 0;
		}
		.gray-btn {
			color: #666;
			border: 1upx solid #cccccc;
		}
		.error-btn {
			color: #fb3204;
			border: 1px solid #fb3204;
		}
		.fill-btn {
			font-size: 26upx;
			color: #ffffff;
			background: $theme-bg-btn-color;
		}
		.expert {
			color: #fb3204;
			background: #ffe3dd;
			border: none;
			padding: 10rpx 0;
		}
	}

	.layout {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-top: 24rpx;
		.total-item {
			border-top: 1rpx solid #eeeeee;
		}
		.item {
			padding-bottom: 30rpx;

			&:last-child {
				padding-bottom: 0;
			}
			.title {
				font-weight: 400;
				font-size: 26rpx;
				color: #333333;
				> text {
					font-weight: 400;
					font-size: 22rpx;
					color: #888888;
				}
			}
			.val {
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
			}
			.copy {
				color: #000;
				&:before {
					content: '|';
					color: #eeeeee;
					margin: 0 10rpx;
				}
			}
			.gray {
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}
			.total {
				padding-top: 30rpx;
				.text {
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
					margin-bottom: 5rpx;
				}
				.text-val {
					font-size: 34rpx;
					color: #fb3204;
				}
				.rmb:before {
					font-size: 28rpx;
				}
			}
		}
	}

	.fill {
		position: relative;
		margin-top: 30rpx;
		padding-bottom: 120rpx;
		.status {
			.top {
				> text {
					font-weight: 500;
					font-size: 36rpx;
					color: #ffffff;
					margin-left: 13rpx;
				}
			}
			.status-bottom {
				margin-top: 24rpx;
				.abs {
					font-weight: 400;
					font-size: 24rpx;
					color: #ffffff;
				}
				.time {
					@include flex;
					font-size: 26rpx;
					align-items: center;
					margin-left: 10rpx;

					&__custom {
						font-size: 26rpx;
						height: 20px;
						// background-color: #dedfe2;
						border-radius: 4px;
						/* #ifndef APP-NVUE */
						display: flex;
						/* #endif */
						justify-content: center;
						align-items: center;

						&__item {
							color: #fff;
							font-size: 26rpx;
							text-align: center;
						}
					}

					&__doc {
						color: #fff;
						padding: 0px 2px;
					}

					&__item {
						color: #fff;
						font-size: 15px;
						margin-right: 4px;
					}
				}
			}
		}
		.infos {
			background: #f4f5f8;
			border-radius: 30rpx 30rpx 0rpx 0rpx;
			padding: 30rpx;
			margin-top: 60rpx;
			.address {
				background: #ffffff;
				border-radius: 20rpx;
				padding: 25rpx;

				.null-address {
					font-weight: 500;
					font-size: 30rpx;
					color: #000000;
					padding: 20rpx 0;
				}

				.province {
					.val {
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
						margin-left: 14rpx;
					}
					.icon {
						width: 27rpx;
						height: 27rpx;
					}
				}
				.details {
					font-weight: 500;
					font-size: 30rpx;
					color: #000000;
					margin: 18rpx 0;
				}
				.nickname {
					.val {
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
					}
					.mobile {
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
						margin-left: 31rpx;
						margin-top: 2rpx;
					}
				}
				.right-icon {
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
					border-radius: 10rpx;
					border: 1px solid #cccccc;
					padding: 10rpx 20rpx;
					margin-left: 59rpx;
				}
			}

			.product {
				background: #ffffff;
				border-radius: 20rpx;
				padding: 0 24rpx;
				margin-top: 24rpx;
				.business {
					padding-top: 24rpx;
					margin-bottom: 5rpx;
					> image {
						width: 36rpx;
						height: 36rpx;
						border-radius: 6rpx;
					}
					> view {
						font-weight: 500;
						font-size: 26rpx;
						color: #000000;
						margin-left: 10rpx;
					}
				}
				.item {
					position: relative;

					padding: 24rpx 0;
					border-bottom: 1rpx solid #eeeeee;
					&:last-child {
						border-bottom: none;
					}
					.icon {
						width: 142rpx;
						height: 142rpx;
						border-radius: 20rpx;
					}

					.refund_status_name {
						position: absolute;
						right: 0;
						top: 24rpx;
						font-size: 20rpx;
						color: #fb3204;
						border: 1px solid #fb3204;
						border-radius: 18rpx;
						padding: 2rpx 10rpx;
					}

					.info {
						margin-left: 23rpx;

						.top {
							.title {
								font-weight: 400;
								font-size: 26rpx;
								color: #000000;
							}
							.spec {
								font-weight: 400;
								font-size: 22rpx;
								color: #999999;
								margin-top: 15rpx;
							}
						}
						.bom {
							.price {
								font-weight: 500;
								font-size: 32rpx;
								color: #fb3204;
							}
							.num {
								font-weight: 400;
								font-size: 22rpx;
								color: #999999;
							}
						}
					}
					.total {
						.val {
							font-weight: 500;
							font-size: 30upx;
							color: #000000;
						}
						.num {
							font-weight: 400;
							font-size: 24upx;
							color: #333333;
							margin-top: 10upx;
							margin-left: 15px;
						}
					}
				}
			}
		}
	}
</style>
